<template>
  <div>
    <!-- 头部 --start-->
    <div class="nav">
      <p>
        <span>.</span> 生成薪资表
      </p>
      <div id="nav_go2">
        <el-button type="info" icon="el-icon-back" class="btn_fanhui" @click="revert()">返回</el-button>
      </div>
    </div>
    <!-- 头部 --end-->

    <!-- 生成工资表 --statrt-->
    <div class="title">
      行政办公室
      <el-date-picker style="width:6%" v-model="year" type="year" placeholder></el-date-picker>年
      <el-select v-model="month" placeholder style="width:5%">
        <el-option
          v-for="item in monthvalue"
          :key="item.value"
          :label="item.label"
          :value="item.label"
        ></el-option>
      </el-select>月份工资表
    </div>
    <div id="table_salary">
      <!-- 详情 --start-->
      <template>
        <el-table :data="detailedvalue" style="width: 100%" height="100%">
          <el-table-column label="部门编号" width="200">
            <template slot-scope="scope">
              <el-select v-model="scope.row.depart" placeholder="请选择部门">
                <el-option
                  v-for="item in departmentvlue"
                  :key="item.key"
                  :label="item.value"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="序号" width="200" type="index"></el-table-column>
          <el-table-column label="姓名" width="200">
            <template slot-scope="scope">
              <el-input v-model="scope.row.empname"></el-input>
            </template>
          </el-table-column>
          <!-- 工资部分 --start-->
          <el-table-column label="工资部分">
            <el-table-column label="岗位工资" width="200">
              <template slot-scope="scope">
                <el-input v-model="scope.row.salary"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="工龄津贴" width="200">
              <template slot-scope="scope">
                <el-input v-model="scope.row.workagepay"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="岗位/项目补" width="200">
              <template slot-scope="scope">
                <el-input v-model="scope.row.positpay"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="奖金" width="200">
              <template slot-scope="scope">
                <el-input v-model="scope.row.bonus"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="加班费" width="200">
              <template slot-scope="scope">
                <el-input v-model="scope.row.addworkpay"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="驻外补助" width="200">
              <template slot-scope="scope">
                <el-input v-model="scope.row.outpay"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="补发工作" width="200">
              <template slot-scope="scope">
                <el-input v-model="scope.row.reissuepy"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="餐费补贴" width="200">
              <template slot-scope="scope">
                <el-input v-model="scope.row.mealpay"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="应发工作" width="200">
              <template slot-scope="scope">
                <el-input v-model="scope.row.shouldpay"></el-input>
              </template>
            </el-table-column>
          </el-table-column>
          <!-- 扣款部分 --start-->
          <el-table-column label="扣款">
            <el-table-column label="考勤扣款" width="200">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.abscutpay"
                  @input="abscutpayfn(scope.row.abscutpay,scope.$index)"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="扣款" width="200">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.cupayt"
                  @input="cupaytfn(scope.row.cupayt,scope.$index)"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="合计" width="200">
              <template slot-scope="scope">
                <el-input v-model="scope.row.kktotal" readonly></el-input>
              </template>
            </el-table-column>
          </el-table-column>
          <!-- 代缴社会保险费公积金部分 --start-->
          <el-table-column label="代缴社会保险费公积金">
            <el-table-column label="养老金" width="200">
              <template slot-scope="scope">
                <el-input v-model="scope.row.oldor" @input="oldorfn(scope.row.oldor,scope.$index)"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="失业金" width="200">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.nowork"
                  @input="noworkfn(scope.row.nowork,scope.$index)"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="医疗金" width="200">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.treatement"
                  @input="treatementfn(scope.row.treatement,scope.$index)"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="公积金" width="200">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.cpfbord"
                  @input="cpfbordfn(scope.row.cpfbord,scope.$index)"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="合计" width="200">
              <template slot-scope="scope">
                <el-input v-model="scope.row.djtotal" readonly></el-input>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="税前工资" width="200">
            <template slot-scope="scope">
              <el-input v-model="scope.row.taxbefore"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="代缴个税" width="200">
            <template slot-scope="scope">
              <el-input v-model="scope.row.reptax"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="个人借贷" width="200">
            <template slot-scope="scope">
              <el-input v-model="scope.row.perdebit"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="实发工资" width="200">
            <template slot-scope="scope">
              <el-input v-model="scope.row.takemoney" @focus="adddetailedfn()"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="备注" width="200">
            <template slot-scope="scope">
              <el-input v-model="scope.row.remark"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <!-- 生成工资表 --end-->

    <!-- 审核按钮 --statrt-->
    <div class="bottom" v-if="state1==1">
      <el-button type="primary" size="medium">通过</el-button>
      <el-button type="info" size="medium">驳回</el-button>
    </div>
    <!-- 审核按钮 --end-->

    <!--  生成工资表按钮--statrt-->
    <div class="bottom" v-else>
      <el-button type="primary" size="medium" @click="addgz()">确认</el-button>
      <el-button type="info" size="medium" @click="revert()">返回</el-button>
    </div>
    <!--  生成工资表按钮--end-->
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      month: "",
      year: "",
      depart: "",
      monthvalue: [
        { label: "1" },
        { label: "2" },
        { label: "3" },
        { label: "4" },
        { label: "5" },
        { label: "6" },
        { label: "7" },
        { label: "8" },
        { label: "9" },
        { label: "10" },
        { label: "11" },
        { label: "12" }
      ],
      tableData: [{}], //概略数据
      detailedvalue: [{}], //详细数据
      departmentvlue: [],
      state2: "",
      tableState: false, //判断概略
      tableState1: true, //判断详情
      operation: true,
      operation1: false,
      state1: "",
      abscutpay: "",
      cupayt: "",
      oldor: "",
      nowork: "",
      treatement: "",
      cpfbord: ""
    };
  },
  created() {
    this.state1 = this.$route.query.state1;
    this.state2 = this.$route.query.state2;
    this.getbm();
  },
  methods: {
    //获取部门
    getbm() {
      let arr = { id: 4 };
      let arr1 = JSON.stringify(arr);
      axios(
        "apis/PresidentManagement.asmx/Limited?index=2&jsondata=" + arr1
      ).then(({ data }) => {
        let data1 = this.$x2js.xml2js(data);
        let data3 = JSON.parse(data1.string.__text);
        this.departmentvlue = data3;
      });
    },
    //
    abscutpayfn(a, b) {
      this.abscutpay = a;
      if (this.cupayt !== "") {
        this.detailedvalue[b].kktotal =
          Number(this.abscutpay) + Number(this.cupayt);
      }
    },
    //
    cupaytfn(a, b) {
      this.cupayt = a;
      if (this.abscutpay !== "") {
        this.detailedvalue[b].kktotal =
          Number(this.abscutpay) + Number(this.cupayt);
      }
    },
    oldorfn(a, b) {
      this.oldor = a;
      if (this.nowork !== "" || this.treatement !== "" || this.cpfbord !== "") {
        this.detailedvalue[b].djtotal =
          Number(this.oldor) +
          Number(this.nowork) +
          Number(this.treatement) +
          Number(this.cpfbord);
      }
    },
    noworkfn(a, b) {
      this.nowork = a;
      if (this.oldor !== "" || this.treatement !== "" || this.cpfbord !== "") {
        this.detailedvalue[b].djtotal =
          Number(this.oldor) +
          Number(this.nowork) +
          Number(this.treatement) +
          Number(this.cpfbord);
      }
    },
    treatementfn(a, b) {
      this.treatement = a;
      if (this.oldor !== "" || this.nowork !== "" || this.cpfbord !== "") {
        this.detailedvalue[b].djtotal =
          Number(this.oldor) +
          Number(this.nowork) +
          Number(this.treatement) +
          Number(this.cpfbord);
      }
    },
    cpfbordfn(a, b) {
      this.cpfbord = a;
      if (this.oldor !== "" || this.nowork !== "" || this.treatement !== "") {
        this.detailedvalue[b].djtotal =
          Number(this.oldor) +
          Number(this.nowork) +
          Number(this.treatement) +
          Number(this.cpfbord);
      }
    },
    //新增
    addgz() {
      var e = [];
      for (var i = 0; i < this.detailedvalue.length; i++) {
        if (this.detailedvalue[i].empname !== undefined) {
          e.push(this.detailedvalue[i]);
        }
      }
      let vv = (this.year =
        this.year.getFullYear() +
        "-" +
        (this.year.getMonth() + 1) +
        "-" +
        this.year.getDate() +
        " ");

      let arr = {
        yeardate: String(vv.substring(0, 4)) + "-" + String(this.month),
        depart: this.detailedvalue[0].depart,
        lstSalarys: e
      };
      let arr1 = JSON.stringify(arr);
      axios(
        "apis/PersonnelManagement.asmx/SalaryManlst?index=3&jsondata=" + arr1
      ).then(({ data }) => {
        let data1 = this.$x2js.xml2js(data);
        let data3 = data1.string.__text;
        console.log(data3);
        if (data3 == "ok") {
          this.$message({
            message: "新增成功",
            type: "success"
          });
          this.$router.go(-1);
        } else {
          this.$message.error("新增失败");
        }
      });
    },
    //返回
    revert() {
      this.$router.go(-1);
    },
    adddetailedfn() {
      (this.abscutpay = ""),
        (this.cupayt = ""),
        (this.oldor = ""),
        (this.nowork = ""),
        (this.treatement = ""),
        (this.cpfbord = "");
      let depart1 = this.detailedvalue[0].depart;
      let arr = { depart: depart1 };
      this.detailedvalue.push(arr);
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.title {
  height: 40px;
  text-align: center;
}
.nav {
  //border: solid 1px red;
  height: 60px;
  padding: 0 1%;
  position: relative;
  p {
    height: 40px;
    margin: 10px 0;
    line-height: 40px;
    span {
      background: $Header_color;
      color: $Header_color;
    }
  }
  #nav_go2 {
    position: absolute;
    top: 10px;
    right: 1%;
    img {
      height: 16px;
      padding-right: 10px;
    }
  }
}
#table_salary {
  width: 95.1%;
  height: 600px;
  margin: 0 auto;
  position: relative;
  p {
    width: 30px;
    height: 60px;
    background: $Personnel;
    text-align: center;
    border-radius: 0 5px 5px 0;
    color: $white;
    padding-top: 10px;
    position: absolute;
    cursor: pointer;
    right: -2.2%;
    top: 200px;
  }
}
.bottom {
  text-align: center;
  margin-top: 10px;
}
</style>
<style>
#table_salary .el-table thead.is-group th {
  background: #fff;
}
.el-table th > .cell {
  text-align: center;
}
#table_salary .el-table {
  border-left: 0;
  border-right: 0;
}
#table_salary .el-input__inner {
  width: 100%;
  border: none;
  outline: none;
  text-align: center;
}
#table_salary .el-table td div {
  text-align: center;
}
#table_salary .el-table tbody tr:hover > td {
  background-color: #ffffff !important;
}
</style>